<template>
  <div :style="{height:'100%',backgroundImage:'url('+bgImage+')',backgroundSize: bgSize  }"></div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'game_hongbao_btn',
  cname: '红包按钮',
  configName: 'c_base_image',
  icon: 'iconfuzhukongbai',
  type: 3,// 0 基础组件 1 活动组件

  dataShow: 0, // 1展示，0隐藏
  dataSort: 5, // 排序，小的在前
  dataDelete: 0, // 0不可删除，1可删除
  dataLimit: 1, // 0无限制，
  dataLimitRange: 0,  // 限制范围:0多个页面，1 1个页面
  dataTag: [1, 2],  // 组件标签-筛选

  dataExtendOne: 0, // 两个扩展，暂时无用
  dataExtendTwo: 0,

  defaultName: 'gameHongbaoBtn', // 外面匹配名称
  props: {
    index: {
      type: null,
      default: -1
    },
    num: {
      type: null
    }
  },
  position: {
    top: 0,
    left: 0,
    width: 234 / 2,
    height: 114 / 2,
    zindex: 2,
  },
  computed: {
    ...mapState('admin/mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler (nVal, oVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
        // this.$store.state.admin.mobildConfig.defaultArray.forEach((el, i) => {
        //     if (el.timestamp == nVal) {
        //         this.setConfig(el)
        //         console.log(i, 'index监听')
        //     }
        // })
      },
      deep: true
    },
    'defaultArray': {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
        this.setConfig(data);
      },
      deep: true
    }
  },
  data () {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: 'gameHongbaoBtn',
        timestamp: this.num,
        position: {
          top: 0,
          left: 0,
          width: 234 / 2,
          height: 114 / 2,
          zindex: 2,
        },
        layoutConfig: {
          widthTitle: '宽度',
          width: 234 / 2,
          heightTitle: '高度',
          height: 114 / 2,
          topTitle: '居上',
          top: 0,
          leftTitle: '居左',
          left: 0,
        },
        logoConfig: {
          title: '背景图片',
          url: ''
        }
      },
      bgImage: '',
      noRepeat: 'no-repeat',
      bgSize: '',
      confObj: {},
      pageData: {},
      edge: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
      this.setConfig(this.pageData)
    })
  },
  methods: {
    setConfig (data) {
      this.bgImage = data.logoConfig.url
      this.bgSize = '100% 100%'
    }
  }
}
</script>

<style scoped lang="stylus">
.box {
  height: 100px;
  background: #F5F5F5;
}
</style>
